<template>
  <div id="hello" class="container">
        <h2>学生列表案例</h2>
        <button @click="add">添加学生</button>
        <button @click="del">删除学生</button>
        <br />
        班级：<input  v-model="grade"/>
        姓名：<input  v-model="name"/>
        性别：<input  v-model="gender"/>
        年龄：<input  v-model="age"/>
        
        <table border="1" width="50%" style="border-collapse: collapse;">
            <tr>
                <th>班级</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr align="center" v-for="item in students" :key="item.id">
                <td>{{item.grade}}</td>
                <td>{{item.name}}</td>
                <td>{{item.gender}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  // props: {
  //   msg: String
  // }
   data(){
          return{
              grade:'',
                name:'',
                gender:'',
                age : '',
                students:[{
                    grade : '17软工2班',
                    name : '张三',
                    gender:'男',
                    age: 28 
                },{
                    grade : '17软工2班',
                    name : '张羽',
                    gender:'女',
                    age: 22
                }]
          }     
            },
            methods:{
                add(){ // 添加学生
                    var student = {
                        grade : this.grade,
                        name : this.name,
                        gender:this.gender,
                        age: this.age
                    }
                    this.students.push(student)
                    this.grade=this.name=this.gender=this.age=" "
                },
                del(){ // 删除学生
                    
                    this.students.pop()
                }
                
            }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
table {
  
 margin: auto;
 margin-top: 20px;
}
</style>
